<template>
  <div class="brand-components">
    <div class="content">
      <!-- 左边 -->
      <div class="left-box">
        <!-- 搜索 -->
        <div class="search-box">
          <input v-model="keyword" class="search-input" :placeholder="$t('product.pleaEntLianName')">
          <div class="search-btn" @click="searchBrand">
            <i class="el-icon-search" />
          </div>
        </div>
        <!-- 平台全部品牌列表 -->
        <div class="brand-box">
          <div v-if="allLianList.length" class="brand-list">
            <div
              v-for="(item, index) in allLianList"
              :key="index"
              class="brand-item"
              :class="{'active':item.isSelected===true}"
              @click="addBrand(item, index)"
            >
              <el-tooltip
                :content="item.name"
                placement="right"
                :open-delay="500"
                effect="light"
              >
                <span class="brand-name">{{ item.name }}</span>
              </el-tooltip>
            </div>
          </div>
          <div v-if="!allLianList.length" class="brands-empty">暂无数据</div>
        </div>
      </div>

      <!-- 右边-已选品牌+自定义链平台 -->
      <div class="right-box">
        <!-- 选择的平台链平台 -->
        <div class="table-box big-tb main-container">
          <div class="table-con">
            <el-table
              :data="signLianList"
              header-cell-class-name="table-header"
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                :label="this.$i18n.t('shopProcess.lianName')"
              >
                <template slot-scope="scope">
                    <span class="table-cell-text">{{ scope.row.name }}</span>
                  </template>
              </el-table-column>
              <el-table-column
                prop="code"
                :label="this.$i18n.t('shopProcess.lianCode')"
              />
              <el-table-column
                prop="icon"
                :label="this.$i18n.t('shopProcess.lianLogo')"
              >
                <template slot-scope="scope">
                  <ImgShow :src="scope.row.icon" :imgStyle="{width:'57px',height:'57px'}" />
                </template>
              </el-table-column>
              <el-table-column
                prop="discount"
                :label="this.$i18n.t('shopProcess.lianDiscount')"
              >
                <template slot-scope="scope">
                  <div class="custom-rate">
                    <el-input
                      v-model="scope.row.discount"
                      type="number"
                      :min="0"
                      :max="99.9999"
                      :precision="4"
                      placeholder="0~99.9999"
                      size="small"
                      style="width: 80%;"
                      @blur="checkCustomizeRateInt(scope)"
                      @keydown.native="channelInputLimit"
                    />%
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                :label="this.$i18n.t('remindPop.operation')"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button type="text" @click="deleteBrand(scope.row.id, scope.$index)">{{ $t('remindPop.delete') }}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

        </div>
        <!-- /选择的平台链平台 -->
      </div>
    </div>
  </div>
</template>

<script>
import imgsUpload from '@/components/imgs-upload'
export default {
  components: {
    imgsUpload
  },
  props: {
    lianSigningList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      // 图片前缀
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      // 全部链平台列表
      allLianList: [],
      // 已选链平台
      signLianList: this.lianSigningList || [],
      // 搜索链平台关键字
      keyword: ''
    }
  },

  watch: {
    signLianList () {
      this.$emit('getSignLianList', this.signLianList)
    }
  },

  mounted () {
    this.getPlatformLian()
  },

  methods: {
    /**
     * 获取平台全部链平台
     */
    getPlatformLian () {
      this.$http({
        url: this.$http.adornUrl(`/platform/blockchain/list`),
        method: 'get',
        params: this.$http.adornParams({
          name: this.keyword,
          status: 1
        })
      }).then(({ data }) => {
        const signLianList = this.signLianList
        const allLianList = data
        this.brandEcho(allLianList, signLianList)
        if(signLianList.length==0){
          for (let i = 0; i < allLianList.length; i++) {
            this.addBrand(allLianList[i], i)
          }
        }
      })
    },

    /**
     * 左侧回显选中链平台或已签约链平台
     * @param {Array} allLianList 全部链平台
     * @param {Array} signLianList 选中链平台和已签约链平台
     */
    brandEcho (allLianList, signLianList) {
      allLianList.forEach(item => {
        item.isSelected = false
      })
      if (signLianList.length > 0 && allLianList.length > 0) {
        for (let i = 0; i < signLianList.length; i++) {
          for (let j = 0; j < allLianList.length; j++) {
            if (signLianList[i].blockchainId === allLianList[j].id) {
              allLianList[j].isSelected = true
              break
            }
          }
        }
      }
      this.allLianList = allLianList
    },

    /**
     * 搜索链平台
     */
    searchBrand () {
      this.getPlatformLian()
    },

    /**
     * 选中添加链平台
     */
    addBrand (brandObj, index) {
      const length = this.signLianList.length
      if (length >= 50) {
        this.$message.warning(this.$i18n.t('shopProcess.brandMaxLimitTips'))
      } else {
        if (brandObj.isSelected === false) {
          this.signLianList.push(brandObj)
        }
        this.allLianList[index].isSelected = true
      }
    },

    /**
     * 删除选中链平台
     * @param {Number} id 链平台id
     * @param {Number} index 选中链平台列表索引
     */
    deleteBrand (id, index) {
      // 去除选中样式
      this.allLianList.forEach(brandItem => {
        if (brandItem.brandId === id) {
          brandItem.isSelected = false
        }
      })
      this.signLianList.splice(index, 1)
    },

    /**
     * 自定义扣率输入框判断
     */
    checkCustomizeRateInt (scope) {
      const { row, $index } = scope
      const orgCustomizeRate = JSON.parse(JSON.stringify(this.signLianList[$index].discount))
      let customizeRate = parseFloat(row.discount)
      let verification = true
      // 如果当前项原本无自定义扣率，失焦时输入框内容为空，则终止
      if ((!orgCustomizeRate && orgCustomizeRate !== 0) && (!customizeRate && customizeRate !== 0)) {
        return
      }
      if (customizeRate) {
        // 0~99.9999
        const reg = /^(([1-9]{0,1}?\d{1}?)|(0{1}))(\.\d{0,4})?$/
        if (!reg.test(customizeRate)) {
          this.messageClosed = false
          this.$message({
            message: this.$i18n.t('shopProcess.customizeDiscountEditSuccess'),
            type: 'error',
            duration: 2000,
            onClose: () => {
              this.messageClosed = true
            }
          })
          verification = false
        }
      }
    },

    channelInputLimit (e) {
      const key = e.key
      // 不允许输入'-'
      if (key === '-' || key === '+') {
        e.returnValue = false
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.brand-components {
  .content {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    color: #606266;

    // 左边盒子
    .left-box {
      width: 20%;
      min-width: 200px;
      margin-right: 10px;
      font-size: 14px;
      .search-box {
        position: relative;
        width: 100%;
        height: 36px;
        background: #FFFFFF;
        border: 1px solid #E8E9EC;
        box-sizing: border-box;
        .search-input {
          width: 100%;
          height: 100%;
          padding: 0 67px 0 12px;
          border: none;
          outline: none;
          box-sizing: border-box;
        }
        input::-webkit-input-placeholder {
          font-size: 14px;
          color: #999;
        }
        .search-btn {
          position: absolute;
          right: 0;
          top: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 55px;
          height: 100%;
          font-size: 20px;
          color: #CBCED4;
          border-left: 1px solid #E8E9EC;
          cursor: pointer;
        }
      }
      .brand-box {
        width: 100%;
        height: 400px;
        border: 1px solid #E9EAEC;
        box-sizing: border-box;
        overflow-y: scroll;
        padding: 10px 0;
        margin-top: 14px;
        .brands-empty {
          font-size: 12px;
          color: #aaa;
          text-align: center;
          padding: 13px 0;
        }
        .brand-list {
          .brand-item {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            padding: 0 10px;
            margin-bottom: 5px;
            cursor: pointer;
            box-sizing: border-box;
            .brand-name {
              display: inline-block;
              max-width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          .active {
            background: rgba(24, 144, 255, 0.13);
          }
        }
        /* 谷歌隐藏滚动条 */
        &::-webkit-scrollbar {
          display: none;
        }
        /* 隐藏滚动条，当IE下溢出，仍然可以滚动 */
        /* IE隐藏滚动条 */
        -ms-overflow-style: none;
        /* 火狐隐藏滚动条 */
        overflow: -moz-scrollbars-none;
      }
      /* 谷歌隐藏滚动条 */
      &::-webkit-scrollbar {
        display: none;
      }
      /* 隐藏滚动条，当IE下溢出，仍然可以滚动 */
      /* IE隐藏滚动条 */
      -ms-overflow-style: none;
      /* 火狐隐藏滚动条 */
      overflow: -moz-scrollbars-none;
    }

    // 右边表格
    .right-box {
      position: relative;
      display: block;
      width: 80%;
      max-height: 500px;
      border: 1px solid #E9EAEC;
      border-bottom: 0;
      box-sizing: border-box;
      .table-con {
        padding-bottom: 0 !important;
        margin-top: 0;
      }
      .table-box {
        // 上传图片样式
        .business-qual {
          & >>> .mul-pic-upload .el-upload-list--picture-card .el-upload-list__item {
            width: 80px;
            height: 80px;
            line-height: 80px;
            margin-bottom: 0;
          }
          & >>> .mul-pic-upload .el-upload--picture-card {
            width: 80px;
            height: 80px;
            line-height: 80px;
          }
        }

        // 表格
        & >>> .el-table__body-wrapper {
          max-height: 400px;
          overflow-y: scroll;
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none; /* IE 10+ */
        }
        & >>> .el-table__body-wrapper::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
        & >>> .el-table__body {
          width: 100%;
        }
      }
    }
  }
}
</style>
